<template>
  <!-- 预订列表 -->
  <view class="book-list">
    <u-toast ref="uToastRef"></u-toast>
    <u-sticky bgColor="#fff">
      <u-tabs
        lineHeight="0"
        itemStyle="width: calc((100% - 220rpx) / 5);height: 80rpx"
        :list="tabList"
        activeStyle="color:#409EFF;border-bottom:4rpx solid #409EFF;height:76rpx;line-height:76rpx"
        inactiveStyle="color:#999999;border-bottom:4rpx solid #fff;height:76rpx;line-height:76rpx"
        @click="Tabclick"
        keyName="name"
      ></u-tabs>
    </u-sticky>

    <u-list
      @scrolltolower="scrolltolower"
      :showScrollbar="true"
      lowerThreshold="100"
    >
      <view class="u-page">
        <u-list-item v-for="(item, index) in indexList" :key="index">
          <view class="book-item">
            <view class="item-header justify-between">
              <view class="">
                {{ item.CheckIn }}
              </view>
              <view class="flex-center" @click="orderDeites(item)">
                <span>详情</span>
                <u-icon style="margin-left: 10rpx" name="arrow-right"></u-icon>
              </view>
            </view>
            <view class="item-nr">
              <view class="book-details">
                <text>{{ item.Name }}</text>
                <text>{{ item.Id }}</text>
                <text class="TheClass">{{ item.TheClass }}</text>
                <text class="CheckIn" v-if="item.State == 'CheckIn'">
                  已入住
                </text>
                <text class="Wait" v-if="item.State == 'Wait'">未入住</text>
                <text class="Cancel" v-if="item.State == 'Cancel'">已取消</text>
                <text class="NoShow" v-if="item.State == 'NoShow'">已过期</text>
              </view>
              <view
                v-for="em in item.roomInfos"
                :key="em.HomeClassId"
                class="room-list"
              >
                <text>
                  {{
                    classList.filter((es) => {
                      return em.HomeClassId == es.Id
                    })[0].Name
                  }}
                </text>
                <text style="margin-left: 20rpx">{{ em.Num }}间</text>
                <view class="room">
                  <text v-if="em.RoomNo !== ''">排房：{{ em.RoomNo }}</text>
                  <text v-else>未排房</text>
                </view>
              </view>
            </view>
            <view class="item-btn justify-between">
              <view class="price">¥：299:00</view>
              <view class="flex-center" v-if="item.State == 'Wait'">
                <u-button
                  type="info"
                  :plain="true"
                  size="small"
                  text="取消"
                  @click="voidOrder(item)"
                ></u-button>
                <view style="width: 30rpx"></view>
                <u-button
                  type="primary"
                  size="small"
                  text="转入住"
                  @click="CheckOrder(item)"
                ></u-button>
              </view>
            </view>
          </view>
        </u-list-item>
        <u-loadmore
          fontSize="34rpx"
          iconSize="34rpx"
          :status="loadMoreStatus"
        />
      </view>
    </u-list>
    <view class="book-btn flex-center" @click="btnNew">
      <u-icon
        color="#fff"
        size="40rpx"
        label="预订"
        labelPos="bottom"
        space="8rpx"
        labelSize="24rpx"
        labelColor="#fff"
        name="plus"
      ></u-icon>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  BookListv1,
  book_Listv1,
  GetHomeClassList,
  BookMoneyList,
  CancelBook,
  Order_Book_ID,
  BOOK_LIST
} from '@/api/server/v1/book'
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import toast from '@/utils/toast'
const tabList = ref([
  {
    name: '全部',
    key: 'All'
  },
  {
    name: '已入住',
    key: 'CheckIn'
  },
  {
    name: '未入住',
    key: 'Wait'
  },
  {
    name: '已取消',
    key: 'Cancel'
  },
  {
    name: '已过期',
    key: 'NoShow'
  }
])
let Tabkey: string = 'All'
//预订列表
let indexList = ref<Array<BOOK_LIST>>([])
let Pages: number = 1
let yema: book_Listv1 = reactive({
  page: Pages,
  limit: 10,
  State: Tabkey
})
let classList = ref<Array<{ Id: string; Name: string }>>([])
//全部房型
const homelist = function () {
  GetHomeClassList().then((res) => {
    console.log(res)
    classList.value = res
  })
}
//预订列表
const booklistS = function () {
  const page = Pages
  const State = Tabkey
  BookListv1({
    ...yema,
    page,
    State
  }).then((res) => {
    console.log(res)
    if (res.Items.length > 0) {
      if (res.Items.length < 10) {
        res.Items.forEach((ele) => {
          indexList.value.push(ele)
        })
        loadMoreStatus.value = 'nomore'
      } else {
        res.Items.forEach((ele) => {
          indexList.value.push(ele)
        })
      }
    } else {
      loadMoreStatus.value = 'nomore'
    }
  })
}
const Tabclick = function (item) {
  Pages = 1
  Tabkey = item.key
  indexList.value = []
  booklistS()
}
//loading加载中  nomore停止加载  loadmore到底加载
const loadMoreStatus = ref('loadmore')
onLoad(() => {
  homelist()
  booklistS()
})
//到底执行
const scrolltolower = () => {
  if (loadMoreStatus.value === 'nomore') {
  } else {
    Pages++
    booklistS()
  }
}
let OrderId: Order_Book_ID = reactive({
  id: ''
})
let show = ref(false)
//取消预订订单
const voidOrder = (order) => {
  console.log(order.Id, '取消')
  const id = order.Id
  BookMoneyList({
    ...OrderId,
    id
  }).then((res) => {
    console.log(res)
    if (res.length > 0) {
      toast.$toast('当前预订有未退订金记录，请先处理后再结束')
    } else {
      uni.showModal({
        title: '提示',
        content: '确认取消该预订单吗？',
        success: function (res) {
          if (res.confirm) {
            // 执行确认后的操作
            CancelBook({
              ...OrderId,
              id
            }).then((res) => {
              console.log(res)
              Pages = 1
              toast.$toast('取消成功')
              indexList.value = []
              booklistS()
            })
          } else {
            // 执行取消后的操作
          }
        }
      })
    }
  })
}
//预订转入住
const CheckOrder = (order) => {
  console.log(order.Id, '入住')
}
//详情
const orderDeites = (order) => {
  console.log(order.Id, '详情')
  uni.navigateTo({
    url: `/bookPages/book/pre/bookdetails?id=${order.Id}`
  })
}
//新增预订
const btnNew = () => {
  console.log('新增预订')
  uni.navigateTo({
    url: '/bookPages/book/pre/newAdd'
  })
}
</script>

<style lang="scss" scoped>
.book-list {
  .tab-item {
    width: calc(100% / 5);
  }

  .book-btn {
    position: fixed;
    right: 20rpx;
    bottom: 200rpx;
    background-color: #409eff;
    border: 2px solid #409eff;
    width: 96rpx;
    height: 96rpx;
    border-radius: 100rpx;
    box-shadow: 0px 0px 6px 1px rgba(64, 158, 255, 0.89);
  }

  .u-page {
    background-color: #f2f3f6;
    padding: 0 24rpx;
  }

  .book-item {
    margin: 24rpx 0;
    background-color: #fff;
    border-radius: 8rpx;

    .item-header {
      height: 90rpx;
      align-items: center;
      padding: 0 32rpx;
    }

    .item-nr {
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      padding: 40rpx 32rpx;

      text {
        padding: 0 10rpx;

        border-radius: 4rpx;
      }

      .book-details {
        font-size: 24rpx;

        text {
          padding: 0 10rpx;
          border-radius: 4rpx;
          text-align: center;
        }

        text:nth-child(2n) {
          margin: 0 10rpx;
        }

        .TheClass {
          background-color: #000000;
          color: #fff;
        }

        .CheckIn {
          background-color: #409eff;
          color: #fff;
        }

        .Wait {
          background-color: #47cc2a;
          color: #fff;
        }

        .Cancel {
          background-color: #999999;
          color: #fff;
        }

        .NoShow {
          background-color: #ff6c66;
          color: #fff;
        }
      }
    }

    .item-btn {
      height: 90rpx;
      padding: 0 32rpx;
      align-items: center;

      .price {
        font-size: 28rpx;
        font-weight: 500;
        color: #409eff;
      }
    }
  }
}
</style>
